<template>
  <div class="cascader-tree">
    <el-input ref="cascaderTreeInput"
      class="cascader-tree-input"
      clearable
      @clear="clearableEvt"
      @focus="inputFocusEvt"
      @blur="inputBulrEvt"
      @keyup="inputKeyupEvt"
      :value="currentDataName"
      :placeholder="placeholder" />
    <el-tree v-show="inputHover"
      ref="cascaderTreeMenu"
      class="cascader-tree-menu"
      :data="treeData"
      :props="defaultProps"
      :default-expanded-keys="defaultExpandedData"
      :highlight-current="true"
      node-key="id"
      v-on:mouseover.native="menuOverEvt"
      v-on:mouseleave.native="menuLeaveEvt"
      @node-click="handleNodeClick">
    </el-tree>
  </div>
</template>
<script>
import { strRemoveSquareBrackets } from '@/utils/CommonUtil'
export default {
  model: {
    prop: 'returnValue',
    event: 'bindRegionMode'
  },
  props: {
    isObjDataReturn: {
      type: Boolean,
      default: false
    },
    returnValue: {
      type: String
    },
    single: {
      type: Boolean,
      default: true
    },
    treeData: {
      type: Array
    },
    treeType: String,
    placeholder: {
      type: String,
      default: '请选择'
    }
  },
  mounted () {
    this.currentDataName = null
    this.getCurrentData(this.returnValue)
  },
  data () {
    return {
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      defaultExpandedData: [],
      inputHover: false,
      menuHover: false,
      currentDataName: null,
      currentData: null,
      allId: null
    }
  },
  methods: {
    clearableEvt () {
      this.currentDataName = null
    },
    loadData () {
      if (this.currentData && this.currentData.id) {
        let id = this.currentData.id
        this.defaultExpandedData = [id]
      }
    },
    handleNodeClick (data) {
      if (data) {
        this.currentData = data
        this.currentDataName = data.name
        this.defaultExpandedData = [data.id]
        if (this.isObjDataReturn) {
          this.$emit('bindRegionAllMode', data)
        } else {
          if (this.single) {
            this.$emit('bindRegionMode', data.id)
          } else {
            this.allId = this.getAllId(data)
            this.$emit('bindRegionMode', this.allId)
          }
        }
      }
      this.$refs.cascaderTreeInput.focus()
    },
    inputFocusEvt () {
      this.inputHover = true
    },
    inputBulrEvt () {
      if (!this.menuHover) {
        this.inputHover = false
      }
      if (this.currentData && this.currentData.id) {
        let id = this.currentData.id
        this.defaultExpandedData = [id]
      }
    },
    menuOverEvt () {
      this.menuHover = true
      this.$refs.cascaderTreeInput.focus()
    },
    menuLeaveEvt () {
      this.menuHover = false
    },
    inputKeyupEvt () {
      console.log(123)
    },
    getCurrentData (id) {
      // 根据ID 查询节点并显示在input中
      if (id) {
        if (id === '0') {
          this.currentDataName = '根节点'
        } else {
          this.defaultExpandedData = [id]
          this.$nextTick(() => {
            let menu = this.$refs.cascaderTreeMenu
            if (!menu) {
              this.currentDataName = id
            } else {
              let node = menu.getNode(id)
              if (node) {
                let data = node.data
                this.allId = this.getAllId(data)
                this.currentDataName = data.name
              }
            }
          })
        }
      }
    },
    getAllId (data) {
      if (data) {
        let allId
        if (this.treeType === 'grid') {
          allId = data.allId
        } else {
          allId = data.parentAllId || data.allId
        }
        if (allId) {
          allId = strRemoveSquareBrackets(allId)
          return allId ? allId + ',' + data.id : data.id
        } else if (data.parentId) {
          return data.parentId ? data.parentId + ',' + data.id : data.id
        } else if (data.id) {
          return data.id
        }
      }
      return null
    }
  },
  watch: {
    'returnValue': function (newValue, oldValue) {
      this.getCurrentData(newValue)
    }
  }
}
</script>
<style>
.cascader-tree {
  position: relative;
}
.cascader-tree .cascader-tree-input {
  width: 25%;
}
.cascader-tree .cascader-tree-menu {
  position: absolute;
  z-index: 80000;
  display: block;
  overflow: auto;
  height: 200px;
  min-width: 200px;
  margin-top: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.hidden {
  display: none;
}
</style>
